<template>
  <div>
    <!-- icon栏 -->
    <div class="searchTop">
      <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <input type="text" placeholder="Search" v-model="searchKey" @keydown.enter="enterKey">
    </div>
    <!-- 搜索历史 -->
    <div class="searchHistory">
      <div class="firstControlLine">
        <span>Search History:</span>
        <svg class="icon" aria-hidden="true" @click="delHistory">
          <use xlink:href="#icon-shanchu"></use>
        </svg>
      </div>
      <span v-for="(item, index) in keywordList" :key="index" @click="searchHistory(item)">{{ item }}</span>
    </div>
    <!-- 搜索结果 -->
    <searchResultList :searchList="searchList"></searchResultList>
    <!-- <div class="musicList">
      <ul class="listContainer">
        <li class="musicItem" v-for="(item, index) in searchList" :key="index">
          <div class="leftMessage" @click="updatePlayListIndex(item, index)">
            <span>{{ index + 1 }}</span>
            <div class="songMessage">
              <div class="songName">{{ item.name }}</div>
              <div class="songCreator">
                <div class="creator" v-for="(creator, index) in item.artists" :key="index">{{ creator.name }}</div>
              </div>
            </div>
          </div>
          <div class="mvIcon">
            <svg class="icon" aria-hidden="true" v-if="item.mv != 0" style="margin-right:15px">
              <use xlink:href="#icon-bofang"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-caidan1"></use>
            </svg>
          </div>

        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import { reqSearch } from '@/api/requests/home'
import searchResultList from './SearchChild/searchResultList.vue'
export default {
  components: {
    searchResultList
  },
  data() {
    return {
      keywordList: [],
      searchKey: '',
      searchList: []
    }
  },
  mounted() {
    // 这是对搜索历史做本地存储
    this.keywordList = JSON.parse(localStorage.getItem('keywordList')) ? JSON.parse(localStorage.getItem('keywordList')) : []
  },

  methods: {
    // 按下空格搜索哦
    async enterKey() {
      // 在保存之前进行一个判断，不能让什么值都保留下来
      if (this.searchKey.trim() == '') return
      else {
        // 按下空格存储搜索的历史
        this.keywordList.unshift(this.searchKey)
        // 去重
        // 长度限制
        if (this.keywordList.length > 10) {
          this.keywordList.splice(this.keywordList.length - 1, 1)
        }
        this.keywordList = [...new Set(this.keywordList)]
        // 并把搜索的关键词放到本地存储种
        localStorage.setItem('keywordList', JSON.stringify(this.keywordList))
        let result = await reqSearch(this.searchKey)
        this.searchList = result.data.result.songs
        console.log(result);
        // 搜索完之后要清空搜索框
        this.searchKey = ''
      }

    },
    // 删除历史记录
    delHistory() {
      localStorage.removeItem('keywordList')
      this.keywordList = []
    },
    // 点击搜索历史进行搜索
    async searchHistory(item) {
      let result = await reqSearch(item)
      this.searchList = result.data.result.songs
      console.log(result);
    },


  }
}
</script>

<style lang="less" scoped>
.searchTop {
  width: 100%;
  height: 1rem;
  padding: 10px 25px 12px 12px;
  display: flex;
  align-items: center;

  .icon {
    width: .5rem;
    height: .5rem;
    margin-right: 15px;
  }

  input {
    flex: 1;
    height: .5rem;
    outline: none;
    border: none;
    border-bottom: 1px solid rgba(35, 171, 121, 0.626);
    text-indent: .5em;
    transition: all .3s;
    font-family: 'Courier New', Courier, monospace;
    outline: 1px solid transparent;

    // box-sizing: border-box;
    &:focus {
      // border: 1px solid rgb(39, 182, 130);
      border: none;
      outline: 1px solid rgb(39, 182, 130);
    }

    &::-webkit-input-placeholder {
      font-family: 'Courier New', Courier, monospace;
    }
  }
}

.searchHistory {
  .firstControlLine {
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    span {
      background-color: transparent;
      font-weight: bold;
      color: black;
      font-size: 17px;
      padding: 0;
      margin: 0;
    }
  }

  span {
    font-family: 'Courier New', Courier, monospace;
    margin: 3px 10px;
    height: 30px;
    padding: 0 15px;
    line-height: 30px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    background-color: rgba(52, 215, 155, 0.814);
    color: rgb(255, 255, 255);
  }
}

.musicList {

  .listContainer {
    padding-bottom: 1rem;

    .musicItem {
      display: flex;
      margin: 5px 0;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      padding: 0 5px;
      box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.23);
      transition: all .3s ease;

      &:hover {
        background-color: rgba(52, 215, 155, 0.152)
      }

      .leftMessage {
        display: flex;
        align-items: center;

        span {
          margin-right: 15px;
        }

        .songMessage {
          .songName {
            width: 250px;
            font-weight: bold;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .songCreator {
            display: flex;
            color: gray;
            font-size: 13px;

            .creator {
              &:nth-child(n+2) {
                margin: 0 8px;
              }
            }
          }
        }
      }
    }
  }
}
</style>